index.html.vue 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790
  1. <template>
  2. <div>
  3. <!-- 页面头部 -->
  4. <HomePageHead></HomePageHead>
  5. <!-- 页面导航 -->
  6. <HomePageNavigation></HomePageNavigation>
  7. <!-- 广告一 -->
  8. <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
  9. <!-- 二级导航列表 -->
  10. <div class="nav2top"></div>
  11. <div class="nav2">
  12. <ul class="inner">
  13. <li class="home">
  14. {{ title }}
  15. </li>
  16. <li class="titleList" v-for="(item, index) in pageData1" :key="index">
  17. <NuxtLink :href="getLinkPath(item)" :title="item.alias"
  18. :target="item.is_url == 1 ? '_blank' : '_self'">
  19. <span class="nav2_title">{{ item.alias }}</span>
  20. </NuxtLink>
  21. </li>
  22. </ul>
  23. </div>
  24. <div class="nav2btm"></div>
  25. <!-- 第一层 -->
  26. <!-- 第一部分 -->
  27. <div class="part1">
  28. <div class="inner">
  29. <div class="part1_left" v-if="pageData[0]">
  30. <div class="part1_title">
  31. <h2 class="nav_part1_left">
  32. <NuxtLink :href="getLinkPath(pageData[0])" v-if="pageData[0]" :title="pageData[0].alias">
  33. {{ pageData[0].alias }}
  34. </NuxtLink>
  35. <em></em>
  36. </h2>
  37. </div>
  38. <div class="part1_content">
  39. <div class="context_left">
  40. <div class="top" v-for="(item, index) in pageData[0].data" :key="index">
  41. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  42. <img :src="item.imgurl" alt="item.title">
  43. <span class="title1">{{ item.title }}</span>
  44. </NuxtLink>
  45. </div>
  46. <div class="bottom">
  47. <div class="bottom_left" v-for="(item, index) in pageData[0].data1" :key="index">
  48. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  49. <img :src="item.imgurl" alt="item.title">
  50. <span class="title2">{{ item.title }}</span>
  51. </NuxtLink>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="context_right">
  56. <ul class="rightContent">
  57. <li class="context1" v-for="(item, index) in pageData[0].data2" :key="index">
  58. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  59. {{ item.title }}
  60. </NuxtLink>
  61. </li>
  62. </ul>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="part1_right" v-if="pageData[1]">
  67. <div class="part1_right_title">
  68. <h2 class="part1_right_title1_active">
  69. <NuxtLink :href="getLinkPath(pageData[1])" v-if="pageData[1]" :title="pageData[1].alias">
  70. {{ pageData[1].alias }}
  71. </NuxtLink>
  72. <em class="active_bg"></em>
  73. </h2>
  74. </div>
  75. <div class="part1_right_content">
  76. <div class="part1_right_top11">
  77. <div class="part1_right_content_top" v-for="(item, index) in pageData[1].data" :key="index">
  78. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  79. <img :src="item.imgurl" alt="item.title">
  80. <span class="content_top_title2">{{ item.title }}</span>
  81. </NuxtLink>
  82. </div>
  83. </div>
  84. <!-- <div class="part1_right_content_top" v-for="(item, index) in pageData[1].data" :key="index">
  85. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  86. <img :src="item.imgurl" alt="item.title">
  87. <span class="content_top_title2">{{ item.title }}</span>
  88. </NuxtLink>
  89. </div> -->
  90. <ul class="part1_right_content_bottom">
  91. <li class="content_bottom_list" v-for="(item, index) in pageData[1].data1" :key="index">
  92. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  93. {{ item.title }}
  94. </NuxtLink>
  95. </li>
  96. </ul>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. <!-- 第二部分 -->
  102. <div class="part2">
  103. <div class="inner">
  104. <div class="part2_left" v-if="pageData[2]">
  105. <div class="part2_title">
  106. <h2 class="nav_part2_left">
  107. <NuxtLink :href="getLinkPath(pageData[2])" v-if="pageData[2]" :title="pageData[2].alias">
  108. {{ pageData[2].alias }}
  109. </NuxtLink>
  110. <em></em>
  111. </h2>
  112. </div>
  113. <div class="part2_content">
  114. <div class="part2_content_left">
  115. <ul class="content_a">
  116. <li class="context111" v-for="(item, index) in pageData[2].data2" :key="index">
  117. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  118. {{ item.title }}
  119. </NuxtLink>
  120. </li>
  121. </ul>
  122. </div>
  123. <div class="part2_content_right">
  124. <div class="right_top" v-for="(item, index) in pageData[2].data" :key="index">
  125. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  126. <img :src="item.imgurl" alt="item.title">
  127. <span class="title11">{{ item.title }}</span>
  128. </NuxtLink>
  129. </div>
  130. <div class="right_bottom">
  131. <div class="bottom_left" v-for="(item, index) in pageData[2].data1" :key="index">
  132. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  133. <img :src="item.imgurl" alt="item.title">
  134. <span class="title22">{{ item.title }}</span>
  135. </NuxtLink>
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="part2_right" v-if="pageData[3]">
  142. <div class="part2_right_title">
  143. <h2 class="part2_right_title1_active">
  144. <NuxtLink :href="getLinkPath(pageData[3])" v-if="pageData[3]" :title="pageData[3].alias">
  145. {{ pageData[3].alias }}
  146. </NuxtLink>
  147. <em class="active_bg11"></em>
  148. </h2>
  149. </div>
  150. <div class="part2_right_content">
  151. <div class="part2_right_top11">
  152. <div class="part2_right_content_top" v-for="(item, index) in pageData[3].data" :key="index">
  153. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  154. <img :src="item.imgurl" alt="item.title">
  155. <span class="content_top_title22">{{ item.title }}</span>
  156. </NuxtLink>
  157. </div>
  158. </div>
  159. <ul class="part2_right_content_bottom">
  160. <li class="content_bottom_list" v-for="(item, index) in pageData[3].data2" :key="index">
  161. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  162. {{ item.title }}
  163. </NuxtLink>
  164. </li>
  165. </ul>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. <!-- 广告二 -->
  171. <HomeAdvertising :imgurl="adImg2"></HomeAdvertising>
  172. <!-- 第二层 -->
  173. <!-- v-if="pageData.length>7" -->
  174. <div class="part3" v-if="pageData.length > 7">
  175. <div class="inner">
  176. <div class="part3_left">
  177. <div class="part3_left_top" v-if="pageData[4]">
  178. <div class="part3_leftTitle">
  179. <h2 class="part3_left_title">
  180. <NuxtLink :href="getLinkPath(pageData[4])" v-if="pageData[4]"
  181. :title="pageData[4].alias">
  182. {{ pageData[4].alias }}
  183. </NuxtLink>
  184. <em></em>
  185. </h2>
  186. </div>
  187. <div class="part3_left_content" v-if="pageData[4]">
  188. <div class="part3_left_content_top">
  189. <div class="content_top_left">
  190. <div class="part3_photo_text" v-for="(item, index) in pageData[4].data"
  191. :key="index">
  192. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  193. <img :src="item.imgurl" alt="item.title">
  194. <span class="part3_text">{{ item.title }}</span>
  195. </NuxtLink>
  196. <span class="littleTips">精选</span>
  197. </div>
  198. <ul class="part3_content">
  199. <li class="part3_content_list" v-for="(item, index) in pageData[4].data1"
  200. :key="index">
  201. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  202. {{ item.title }}
  203. </NuxtLink>
  204. </li>
  205. </ul>
  206. </div>
  207. <ul class="content_top_right">
  208. <li class="content_right_list" v-for="(item, index) in pageData[4].data2"
  209. :key="index">
  210. <NuxtLink to="#">
  211. <!-- <div class="part3_time">
  212. <span class="month">{{ getTime(item.updated_at, 'day', 1) }}</span>
  213. <span class="xiegang">/</span>
  214. <span class="day">{{ getTime(item.updated_at, 'month', 1) }}</span>
  215. </div> -->
  216. <div class="time_left_content">
  217. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  218. {{ item.title }}
  219. </NuxtLink>
  220. </div>
  221. </NuxtLink>
  222. </li>
  223. </ul>
  224. </div>
  225. </div>
  226. </div>
  227. <div class="part3_left_bottom" v-if="pageData[5] || pageData[6]">
  228. <div class="part3_leftTitle1">
  229. <h2 class="part3_left_title" v-if="pageData[5]" @mouseenter="tabsData = 1"
  230. :class="{ part3_left_title_active: tabsData == 1 }">
  231. <NuxtLink :href="getLinkPath(pageData[5])" @mouseenter="tabsData = 1"
  232. :class="{ active: tabsData == 1 }" :title="pageData[5].alias">
  233. {{ pageData[5].alias }}
  234. </NuxtLink>
  235. <em></em>
  236. </h2>
  237. <h2 class="part3_left_title" v-if="pageData[6]" @mouseenter="tabsData = 2"
  238. :class="{ part3_left_title_active: tabsData == 2 }">
  239. <NuxtLink :href="getLinkPath(pageData[6])" v-if="pageData[6]" @mouseenter="tabsData = 2"
  240. :class="{ active: tabsData == 2 }" :title="pageData[6].alias">
  241. {{ pageData[6].alias }}
  242. </NuxtLink>
  243. <em></em>
  244. </h2>
  245. </div>
  246. <div class="part3_left_content1" v-if="tabsData == 1">
  247. <div class="content_bottom_left">
  248. <div class="content_top" v-for="(item, index) in pageData[5].data" :key="index">
  249. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  250. <img :src="item.imgurl" alt="item.title">
  251. <span class="part3_text">{{ item.title }}</span>
  252. </NuxtLink>
  253. </div>
  254. <div class="content_bottom">
  255. <div class="content_bottom_1" v-for="(item, index) in pageData[5].data1"
  256. :key="index">
  257. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  258. <img :src="item.imgurl" alt="item.title">
  259. <span class="part3_text">{{ item.title }}</span>
  260. </NuxtLink>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="content_bottom_right">
  265. <ul class="bottom_content_1">
  266. <li class="bottom_content_list" v-for="(item, index) in pageData[5].data2"
  267. :key="index">
  268. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  269. {{ item.title }}
  270. </NuxtLink>
  271. </li>
  272. </ul>
  273. </div>
  274. </div>
  275. <div class="part3_left_content1" v-if="tabsData == 2 && pageData[6].alias">
  276. <div class="content_bottom_left">
  277. <div class="content_top" v-for="(item, index) in pageData[6].data" :key="index">
  278. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  279. <img :src="item.imgurl" alt="item.title">
  280. <span class="part3_text">{{ item.title }}</span>
  281. </NuxtLink>
  282. </div>
  283. <div class="content_bottom">
  284. <div class="content_bottom_1" v-for="(item, index) in pageData[6].data1"
  285. :key="index">
  286. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  287. <img :src="item.imgurl" alt="item.title">
  288. <span class="part3_text">{{ item.title }}</span>
  289. </NuxtLink>
  290. </div>
  291. </div>
  292. </div>
  293. <div class="content_bottom_right">
  294. <ul class="bottom_content_1">
  295. <li class="bottom_content_list" v-for="(item, index) in pageData[6].data2"
  296. :key="index">
  297. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  298. {{ item.title }}
  299. </NuxtLink>
  300. </li>
  301. </ul>
  302. </div>
  303. </div>
  304. </div>
  305. </div>
  306. <div class="part3_right" v-if="pageData[7]">
  307. <div class="part3_rightTitle">
  308. <h2 class="part3_right_title">
  309. <NuxtLink :href="getLinkPath(pageData[7])" v-if="pageData[7]" :title="pageData[7].alias">
  310. {{ pageData[7].alias }}
  311. </NuxtLink>
  312. <em></em>
  313. </h2>
  314. <div class="rightMore">
  315. <!-- <NuxtLink to="#">更多》</NuxtLink> -->
  316. </div>
  317. </div>
  318. <ul class="part3_right_content_top" v-if="pageData[7].data1.length > 0">
  319. <li class="part3_right_contentlist_top" v-for="(item, index) in pageData[7].data1" :key="index">
  320. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  321. <span class="numStyle">{{ index + 1 }}</span>
  322. {{ item.title }}
  323. </NuxtLink>
  324. </li>
  325. </ul>
  326. <div class="part3_photo_text_right" v-if="pageData[7].data[0]">
  327. <NuxtLink :href="getLinkPathDetail(pageData[7].data[0])" :title="pageData[7].data[0].title">
  328. <span class="part3_text11">{{ pageData[7].data[0].title }}</span>
  329. <img :src="pageData[7].data[0].imgurl" :alt="pageData[7].data[0].title">
  330. </NuxtLink>
  331. </div>
  332. <ul class="part3_right_content_11" v-if="pageData[7].data2.length > 0">
  333. <li class="part3_right_contentlist_11" v-for="(item, index) in pageData[7].data2" :key="index">
  334. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  335. {{ item.title }}
  336. </NuxtLink>
  337. </li>
  338. </ul>
  339. <div class="part3_photo_text_right" v-if="pageData[7].data[1]">
  340. <NuxtLink :href="getLinkPathDetail(pageData[7].data[1])" :title="pageData[7].data[1].title">
  341. <span class="part3_text11">{{ pageData[7].data[1].title }}</span>
  342. <img :src="pageData[7].data[1].imgurl" :alt="pageData[7].data[1].title">
  343. </NuxtLink>
  344. </div>
  345. <ul class="part3_right_content_11" v-if="pageData[7].data3.length > 0">
  346. <li class="part3_right_contentlist_11" v-for="(item, index) in pageData[7].data3" :key="index">
  347. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  348. {{ item.title }}
  349. </NuxtLink>
  350. </li>
  351. </ul>
  352. <div class="part3_photo_text_right" v-if="pageData[7].data[2]">
  353. <NuxtLink :href="getLinkPathDetail(pageData[7].data[2])" :title="pageData[7].data[2].title">
  354. <span class="part3_text11">{{ pageData[7].data[2].title }}</span>
  355. <img :src="pageData[7].data[2].imgurl" :alt="pageData[7].data[2].title">
  356. </NuxtLink>
  357. </div>
  358. <ul class="part3_right_content_11">
  359. <li class="part3_right_contentlist_11" v-for="(item, index) in pageData[7].data4" :key="index">
  360. <NuxtLink :href="getLinkPathDetail(item)" :title="item.title">
  361. {{ item.title }}
  362. </NuxtLink>
  363. </li>
  364. </ul>
  365. </div>
  366. </div>
  367. </div>
  368. <!-- 页脚部分 -->
  369. <HomeFoot1></HomeFoot1>
  370. </div>
  371. </template>
  372. <script setup>
  373. //0.加载页面依赖 start ---------------------------------------->
  374. import { ref, onMounted } from 'vue';
  375. //0.加载页面依赖 end ---------------------------------------->
  376. //1.获得路由id start ---------------------------------------->
  377. const route = useRoute();
  378. //获得当前的完整路径
  379. const fullPath = route.path;
  380. //拆分,取出来中间这一段,然后提取数字部分
  381. const segments = fullPath.split('/');
  382. const targetSegment = segments[1];
  383. //let routeId = 11 //排除路径错误可以打开这个
  384. //const numberPart = targetSegment.match(/\d+$/)?.[0];
  385. //let routeId = numberPart;
  386. let routeId;
  387. //通过导航路径反向查询导航id
  388. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  389. method: 'GET',
  390. query: {
  391. 'pinyin': targetSegment,
  392. },
  393. });
  394. if (getRouteId.code == 200) {
  395. routeId = getRouteId.data.category_id
  396. } else {
  397. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  398. console.log("错误位置:通过url路径查询导航池id")
  399. console.log("后端错误反馈:", getRouteId.message)
  400. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  401. }
  402. //1.获得路由id end ---------------------------------------->
  403. //2.页面交互效果 start ---------------------------------------->
  404. //2.1
  405. const title = ref("")
  406. const tabsData = ref(1)
  407. async function getPageDataTitle() {
  408. const mkdata = await requestDataPromise('/web/getOneWebsiteCategory', {
  409. method: 'GET',
  410. query: {
  411. 'catid': routeId,
  412. },
  413. });
  414. if (mkdata.code == 200) {
  415. title.value = mkdata.data.alias;
  416. } else {
  417. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  418. console.log("错误位置:获取二级标题")
  419. console.log("后端错误反馈:", mkdata.message)
  420. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  421. }
  422. }
  423. getPageDataTitle();
  424. //2.1 新闻图片切换
  425. const hoverStatus = ref(0)
  426. const qhPic = function (num) {
  427. console.log(num)
  428. hoverStatus.value = num;
  429. }
  430. //2.2 选项卡切换
  431. let showTabs = ref(1)
  432. let qhtabs = function (number) {
  433. console.log(number)
  434. showTabs.value = number
  435. }
  436. //2.3 展示广告
  437. let adImg1 = ref({})
  438. let adImg2 = ref({})
  439. let adImg3 = ref({})
  440. let adImg4 = ref({})
  441. onMounted(async () => {
  442. //从客户端获取行政职能部门 加快打开速度
  443. const { $webUrl, $CwebUrl } = useNuxtApp();
  444. //广告1
  445. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_category_0001`
  446. const responseAd1 = await fetch(url, {
  447. headers: {
  448. 'Content-Type': 'application/json',
  449. 'Userurl': $CwebUrl,
  450. 'Origin': $CwebUrl
  451. }
  452. });
  453. const resultAd1 = await responseAd1.json();
  454. adImg1.value = resultAd1.data[0];
  455. //广告2
  456. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_category_0002`
  457. const responseAd2 = await fetch(url2, {
  458. headers: {
  459. 'Content-Type': 'application/json',
  460. 'Userurl': $CwebUrl,
  461. 'Origin': $CwebUrl
  462. }
  463. });
  464. const resultAd2 = await responseAd2.json();
  465. adImg2.value = resultAd2.data[0];
  466. //广告3
  467. let url3 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_category_0003`
  468. const responseAd3 = await fetch(url3, {
  469. headers: {
  470. 'Content-Type': 'application/json',
  471. 'Userurl': $CwebUrl,
  472. 'Origin': $CwebUrl
  473. }
  474. });
  475. const resultAd3 = await responseAd3.json();
  476. adImg3.value = resultAd3.data[0];
  477. //广告4
  478. let url4 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_category_0004`
  479. const responseAd4 = await fetch(url4, {
  480. headers: {
  481. 'Content-Type': 'application/json',
  482. 'Userurl': $CwebUrl,
  483. 'Origin': $CwebUrl
  484. }
  485. });
  486. const resultAd4 = await responseAd4.json();
  487. adImg4.value = resultAd4.data[0];
  488. })
  489. //2.页面交互效果 end ---------------------------------------->
  490. //3.渲染页面数据 start ---------------------------------------->
  491. //3.1 该页面上所有的导航池 转为动态数据
  492. const pageCategory = ref([]);
  493. //3.2 该页面上需要渲染的所有数据
  494. const pageData = ref([
  495. // { id: 0, data: [], data2: [], title: "", cid: "" },
  496. // { id: 1, data: [], title: "", cid: "" },
  497. // { id: 2, data: [], title: "", cid: "" },
  498. // { id: 3, data: [], title: "", cid: "" },
  499. // { id: 4, data: [], title: "", cid: "" },
  500. // { id: 5, data: [], title: "", cid: "" },
  501. // { id: 6, data: [], title: "", cid: "" },
  502. // { id: 7, data: [], title: "", cid: "" },
  503. // { id: 8, data: [], title: "", cid: "" },
  504. ])
  505. const pageData1 = ref([])
  506. const navSize = ref("");
  507. //3.3 获取所有导航
  508. try {
  509. const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
  510. method: 'GET',
  511. query: {
  512. 'placeid': 1,
  513. 'pid': routeId,
  514. 'num': 20
  515. },
  516. });
  517. console.log('1111111111111二级导航', navigateData)
  518. if (navigateData.code == 200) {
  519. // 遍历可用的导航池放到页面中
  520. for (let index in navigateData.data) {
  521. let data = {
  522. title: navigateData.data[index].name,
  523. cid: navigateData.data[index].category_id,
  524. children_count: navigateData.data[index].children_count,
  525. alias: navigateData.data[index].alias,
  526. aLIas_pinyin: targetSegment + "/" + navigateData.data[index].aLIas_pinyin,
  527. is_url: navigateData.data[index].is_url,
  528. web_url: navigateData.data[index].web_url,
  529. data: [],
  530. data1: [],
  531. data2: [],
  532. data3: [],
  533. data4: [],
  534. category_id1: "",
  535. category_id2: "",
  536. category_id3: "",
  537. category_id4: "",
  538. title1: "",
  539. title2: "",
  540. title3: "",
  541. title4: ""
  542. };
  543. pageData1.value.push(data);
  544. if (navigateData.data[index].is_url == 1) {
  545. // 处理 URL 的逻辑
  546. } else {
  547. //每个页面最多8个模块
  548. pageData.value.push(data);
  549. }
  550. }
  551. //导航池加载完毕,开始申请模块数据
  552. // await getPageData1();
  553. // await getPageData2();
  554. // await getPageData3();
  555. // await getPageData4();
  556. // await getPageData5();
  557. // await getPageData6();
  558. // await getPageData7();
  559. // await getPageData8();
  560. let getJson = [
  561. // { "parent": routeId + ",0,0", "child": pageData.value[0].cid + ",3,10" },//模块1理论前沿
  562. // { "parent": routeId + ",0,0", "child": pageData.value[1].cid + ",2,6" },//模块2典型经验
  563. // { "parent": routeId + ",0,0", "child": pageData.value[2].cid + ",3,10" },//模块3农业天地
  564. // { "parent": routeId + ",0,0", "child": pageData.value[3].cid + ",2,6" },//模块4美丽乡村
  565. // { "parent": routeId + ",0,0", "child": pageData.value[4].cid + ",1,10" },//模块5农民之家
  566. // { "parent": routeId + ",0,0", "child": pageData.value[5].cid + ",3,10" },//模块6农业天地
  567. // { "parent": routeId + ",0,0", "child": pageData.value[6].cid + ",3,10" },//模块7农村建设
  568. // { "parent": routeId + ",0,0", "child": pageData.value[7].cid + ",3,13" },//模块8高端资讯
  569. ]
  570. for (let i = 0; i < pageData.value.length; i++) {
  571. if (i == 0) {
  572. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",3,10" });
  573. } else if (i == 1) {
  574. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",2,6" });
  575. } else if (i == 2) {
  576. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",3,10" });
  577. } else if (i == 3) {
  578. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",2,6" });
  579. } else if (i == 4) {
  580. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",1,13" });
  581. } else if (i == 5) {
  582. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",3,10" });
  583. } else if (i == 6) {
  584. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",3,10" });
  585. } else if (i == 7) {
  586. getJson.push({ "parent": routeId + ",0,0", "child": pageData.value[i].cid + ",3,13" });
  587. }
  588. }
  589. let jsonString = JSON.stringify(getJson);
  590. // console.log("jsonString", getJson);
  591. getPageAllData(jsonString);
  592. } else {
  593. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  594. console.log("错误位置:分类页导航池")
  595. console.log("后端错误反馈:", navigateData.message)
  596. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  597. }
  598. } catch (error) {
  599. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  600. console.log("错误位置:分类页导航渲染阶段")
  601. console.log("错误:导航池渲染执行接口出错!请检查首页的14的模块的具体执行方法!")
  602. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  603. }
  604. async function getPageAllData(jsonString) {
  605. const mkdata = await requestDataPromise('/web/getWebsiteAllArticle', {
  606. method: 'GET',
  607. query: {
  608. 'id': jsonString
  609. },
  610. });
  611. if (mkdata.code == 200) {
  612. console.log(778899)
  613. console.log(mkdata.data)
  614. //模块1理论前沿
  615. if (mkdata.data[0].child.imgnum.length > 0) {
  616. pageData.value[0].data.push(mkdata.data[0].child.imgnum[0]);
  617. }
  618. if (mkdata.data[0].child.imgnum.length > 1) {
  619. pageData.value[0].data1.push(mkdata.data[0].child.imgnum[1]);
  620. }
  621. if (mkdata.data[0].child.imgnum.length > 2) {
  622. pageData.value[0].data1.push(mkdata.data[0].child.imgnum[2]);
  623. }
  624. if (mkdata.data[0].child.textnum) {
  625. pageData.value[0].data2 = mkdata.data[0].child.textnum;
  626. }
  627. //模块2典型经验
  628. if (mkdata.data[1].child.imgnum) {
  629. pageData.value[1].data = mkdata.data[1].child.imgnum;
  630. }
  631. if (mkdata.data[1].child.textnum) {
  632. pageData.value[1].data1 = mkdata.data[1].child.textnum;
  633. }
  634. //模块3农业天地
  635. if (mkdata.data[2].child.imgnum.length > 0) {
  636. pageData.value[2].data.push(mkdata.data[2].child.imgnum[0]);
  637. }
  638. if (mkdata.data[2].child.imgnum.length > 1) {
  639. pageData.value[2].data1.push(mkdata.data[2].child.imgnum[1]);
  640. }
  641. if (mkdata.data[2].child.imgnum.length > 2) {
  642. pageData.value[2].data1.push(mkdata.data[2].child.imgnum[2]);
  643. }
  644. pageData.value[2].data2 = mkdata.data[2].child.textnum;
  645. //模块4美丽乡村
  646. pageData.value[3].data = mkdata.data[3].child.imgnum;
  647. pageData.value[3].data2 = mkdata.data[3].child.textnum;
  648. //模块5农民之家
  649. pageData.value[4].data = mkdata.data[4].child.imgnum;
  650. for (let i in mkdata.data[4].child.textnum) {
  651. if (i < 5) {
  652. pageData.value[4].data1.push(mkdata.data[4].child.textnum[i]);
  653. } else {
  654. pageData.value[4].data2.push(mkdata.data[4].child.textnum[i]);
  655. }
  656. }
  657. //模块6农业天地
  658. if (mkdata.data[5].child.imgnum.length > 0) {
  659. pageData.value[5].data.push(mkdata.data[5].child.imgnum[0]);
  660. }
  661. if (mkdata.data[5].child.imgnum.length > 1) {
  662. pageData.value[5].data1.push(mkdata.data[5].child.imgnum[1]);
  663. }
  664. if (mkdata.data[5].child.imgnum.length > 2) {
  665. pageData.value[5].data1.push(mkdata.data[5].child.imgnum[2]);
  666. }
  667. pageData.value[5].data2 = mkdata.data[5].child.textnum;
  668. //模块7农村建设
  669. if (mkdata.data[6].child.imgnum.length > 0) {
  670. pageData.value[6].data.push(mkdata.data[6].child.imgnum[0]);
  671. }
  672. if (mkdata.data[6].child.imgnum.length > 1) {
  673. pageData.value[6].data1.push(mkdata.data[6].child.imgnum[1]);
  674. }
  675. if (mkdata.data[6].child.imgnum.length > 2) {
  676. pageData.value[6].data1.push(mkdata.data[6].child.imgnum[2]);
  677. }
  678. pageData.value[6].data2 = mkdata.data[6].child.textnum;
  679. //模块8高端资讯
  680. pageData.value[7].data = mkdata.data[7].child.imgnum;
  681. // console.log('1111111',mkdata.data[4].child.textnum);
  682. for (let i in mkdata.data[7].child.textnum) {
  683. if (i < 7) {
  684. pageData.value[7].data1.push(mkdata.data[7].child.textnum[i]);
  685. } else if (i < 9) {
  686. pageData.value[7].data2.push(mkdata.data[7].child.textnum[i]);
  687. } else if (i < 11) {
  688. pageData.value[7].data3.push(mkdata.data[7].child.textnum[i]);
  689. } else {
  690. pageData.value[7].data4.push(mkdata.data[7].child.textnum[i]);
  691. }
  692. }
  693. } else {
  694. ElMessage.error(mkdata.message)
  695. }
  696. }
  697. //3.渲染页面数据 end ---------------------------------------->
  698. //4.设置seo信息 start---------------------------------------->
  699. //4.1 设置seo信息
  700. const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
  701. method: 'GET',
  702. query: {
  703. 'catid': routeId
  704. },
  705. });
  706. if (setData.code == 200) {
  707. let seoTitle = setData.data.seo_title;
  708. let seoDescription = setData.data.seo_description;
  709. let seoKeywords = setData.data.seo_keywords;
  710. let seoSuffix = setData.data.suffix;
  711. let seoName = setData.data.website_name;
  712. useSeoMeta({
  713. title: seoTitle + "_" + seoSuffix,
  714. meta: [
  715. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  716. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
  717. ]
  718. });
  719. } else {
  720. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  721. console.log("错误位置:设置分类页面SEO数据")
  722. console.log("后端错误反馈:", setData.message)
  723. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  724. }
  725. //4.设置seo信息 end---------------------------------------->
  726. //5. 获取日期中单独的年 月 日 start--------------------------->
  727. function getTime(date, part, digits) {
  728. const d = new Date(date);
  729. if (part === 'year') {
  730. let year = d.getFullYear();
  731. if (digits === 2) {
  732. return String(year).slice(-2);
  733. }
  734. return year;
  735. } else if (part === 'month') {
  736. let month = d.getMonth() + 1;
  737. if (digits === 2) {
  738. return String(month).padStart(2, '0');
  739. }
  740. if (month < 10) {
  741. month = '0' + month;
  742. } else {
  743. month = month;
  744. }
  745. return month;
  746. } else if (part === 'day') {
  747. let day = d.getDate();
  748. if (digits === 2) {
  749. return String(day).padStart(2, '0');
  750. }
  751. return day;
  752. }
  753. return null;
  754. }
  755. //5. 获取日期中单独的年 月 日 end------------------------------>
  756. </script>
  757. <style lang="less" scoped>
  758. @import '@/assets/css/class.less';
  759. </style>